import { motion } from 'framer-motion'
import { BASE_PATH } from '@/config'
import { Container, Stage as PixiStage, Sprite, useApp } from '@pixi/react'
import { createContext, useEffect, useRef, useState } from 'react'
import { DisplayObject, Sprite as PixiSprite } from 'pixi.js'
import { ReactReduxContext } from 'react-redux'

const GameCar = ({sprites,car}) => {
    const app = useApp()
    // const { width } = useSize(document.body)
    const width = global.innerWidth
    const [carComponents, setCarComponents] = useState([])
    const handleAddChild = (spriteParams) => {
        const index = carComponents.findIndex(i => i.type === spriteParams.type)
        // const temp = 
        if (index > -1) {
            app.stage.removeChild(carComponents[index])
        }
        const { image, ...rest } = spriteParams
        const sprite = PixiSprite.from(image)
        Object.assign(sprite,{...rest})
        // app.stage.removeChild
        setCarComponents(s => {
            const result = s.slice()
            if (index > -1) {
                result.splice(index, 1, sprite)
                return result
            }
            result.push(sprite)
            return result
        })
        app.stage.addChild(sprite)
        setTimeout(() => {
            if (sprite.zIndex) {
                app.stage.setChildIndex(sprite, 0)
            }   
        });
        // app.stage.setChildIndex(sprite, carComponents.length>0?carComponents.length:0)
    }
    useEffect(() => {
        // const tempSprites = sprites.slice()
        // app.stage.removeChildren(0, carComponents.length)
        carComponents.forEach(item => {
            app.stage.removeChild(item)
        })
        sprites.forEach((item) => {
            handleAddChild(item)
        })
        
        
    }, [sprites])
    return (
        <>
        
            <Container>
            
                <Sprite 
                    image={`${BASE_PATH}/img/game/car_bottom.png`}
                    // x={window.clientWidth}
                    // width={window.clientWidth/2}
                    // anchor={{x:0.5,y:0.5}}
                    width={width}
                    height={94}
                    zIndex={11}
                    y={101}
                    
                />
                
                
                <Sprite 
                    {...car}
                    zIndex={0}
                />
                {/* <Sprite 
                    image={`${BASE_PATH}/img/game/uni-k-3-v1.png`}
                    // x={window.clientWidth}
                    // width={window.clientWidth/2}
                    // anchor={{x:0.5,y:0.5}}
                    width={108}
                    height={44}
                    zIndex={100}
                    x={width*0.5 + 5}
                    y={60}
                    
                /> */}
                
                </Container>
                
        </>
    )
}

const ContextBridge = ({children, Context, render,...reset}) => {
    console.log('context')
    
    return (
        <Context.Consumer>
            {(value) => 
                {
                    return render(<Context.Provider value={value}>{children}</Context.Provider>)
                }
            }
        </Context.Consumer>
    )
}
export const Stage = ({children, ...props}) => {
    // const { width } = useSize(document.body)
    const width = global.innerWidth
    return (
        <ContextBridge 
            Context={ReactReduxContext}
            render={(children) => <PixiStage width={width} height={240} options={{backgroundAlpha:0}}  {...props}>{children}</PixiStage>}
        >
            {children}
        </ContextBridge>
    )
}
const GameApp = (props) => {
    console.log(props)
    return (
        <Stage>
            <GameCar {...props} />
        </Stage>
    )
}
export default GameApp